<template>
    <div class="project-container">
        <ul v-if="currentChosed === 0" class="catalog">
            <li
                @click="currentChosed = item.id"
                v-for="(item, index) in catalog"
                :key="index"
            >
                {{ item.name }}
            </li>
        </ul>
        <div v-else class="demos">
            <div class="head">
                <div @click="currentChosed = 0" class="back">返回</div>
                <div class="title">{{ currentItem.name }}</div>
            </div>
            <template v-if="currentChosed === 1">
                <DragSorting />
            </template>
            <template v-if="currentChosed === 2">
                <DbDemo />
            </template>
            <template v-if="currentChosed === 3">
                <FileLoader />
            </template>
            <template v-if="currentChosed === 4">
                <Worker />
            </template>
            <template v-if="currentChosed === 5">
                <CloudRain />
            </template>
        </div>
    </div>
</template>
<script>
import DragSorting from "@/components/DragSorting";
import DbDemo from "@/components/DbDemo";
import FileLoader from "@/components/FileLoader";
import Worker from "@/components/Worker";
import CloudRain from "@/components/CloudRain";
export default {
    name: "",
    props: {},
    components: {
        DragSorting,
        DbDemo,
        FileLoader,
        Worker,
        CloudRain,
    },
    data() {
        return {
            catalog: [
                {
                    id: 1,
                    name: "拖拽排序",
                },
                {
                    id: 2,
                    name: "indexedDB小试",
                },
                {
                    id: 3,
                    name: "文件拖拽上传",
                },
                {
                    id: 4,
                    name: "worker大文件分片",
                },
                {
                    id: 5,
                    name: "下雨啦",
                },
            ],
            currentChosed: 0,
        };
    },
    created() {},
    mounted() {},
    computed: {
        currentItem() {
            return (
                this.catalog.find((item) => item.id === this.currentChosed) ||
                null
            );
        },
    },
    watch: {},
    methods: {},
};
</script>
<style lang="less" scoped>
@import "~@/styles/mixins.less";
.project-container {
    min-width: 1000px;
    min-height: 800px;
    background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
    height: 100%;
    position: relative;
    .catalog {
        .self-center();
        display: flex;
        flex-direction: column;
        width: 500px;
        height: 500px;
        row-gap: 30px;
        text-align: center;
        align-items: center;
        li {
            width: 200px;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            border-radius: 12px;
            color: #bcc5ce;
            cursor: pointer;
            background-image: linear-gradient(-20deg, #2b5876 0%, #4e4376 100%);
            &:hover {
                color: #fff;
            }
        }
    }
    .demos {
        width: 100%;
        height: 100%;
        .head {
            width: 100%;
            height: 40px;
            line-height: 40px;
            display: flex;
            text-align: center;
            position: relative;
            font-size: 20px;
            .back {
                cursor: pointer;
                width: 50px;
                height: 30px;
                line-height: 30px;
                position: absolute;
                font-size: 16px;
                left: 30px;
                top: 5px;
                border-radius: 8px;
                background-image: linear-gradient(
                    -20deg,
                    #2b5876 0%,
                    #4e4376 100%
                );
                color: #bcc5ce;
                &:hover {
                    color: #fff;
                }
            }
            .title {
                width: 100%;
            }
        }
    }
}
</style>
